<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>All Pets</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">
    <div class="blank-slate" *ngIf="(player?.$petsData?.allPets | keyvalue)?.length === 0">
      You have no pets.
    </div>

    <ion-list>
      <ion-reorder-group (ionItemReorder)="reorderPets($event)" disabled="false">
        <ng-container *ngFor="let pet of petOrder">
          <ion-item *ngIf="petHash[pet]">
            <ion-reorder slot="start">
              <app-gendervatar [gender]="petHash[pet].gender"></app-gendervatar> 
            </ion-reorder>
    
            <ion-label class="ion-text-wrap">
              <h3>
                {{ petHash[pet].name }}, the {{ petHash[pet].attribute }} {{ petHash[pet].affinity }}
              </h3>
              <p class="vertical-center">
                Level {{ petHash[pet].level.__current }}/{{ petHash[pet].level.maximum }}
                &nbsp;
                <ion-badge color="tertiary">{{ petHash[pet].rating }}★{{ pet }}</ion-badge>
              </p>
              <p>{{ getPetCurrentEquipped(petHash[pet]) }}/{{ getPetMaxEquipped(petHash[pet]) }} Items Equipped</p>
              <p class="vertical-center">
                {{ petHash[pet].gold.__current | number }}/{{ petHash[pet].gold.maximum | number }} Gold
                <span *ngIf="petGatherStatus(petHash[pet]) as status" class="vertical-center">
                  &nbsp;
                  &middot;
                  &nbsp;
                  <ion-badge [color]="status.color">{{ status.status }}</ion-badge>
                </span>
              </p>
            </ion-label>
    
            <ion-button slot="end" size="small" *ngIf="player.$petsData.currentPet !== pet" (click)="activate(pet)">Activate</ion-button>
          </ion-item>
        </ng-container>
      </ion-reorder-group>

      <ion-item-group *ngIf="(player.$petsData.buyablePets | keyvalue).length > 0">
        <ion-list-header>Purchaseable Pets</ion-list-header>
        <ion-item *ngFor="let newPet of player.$petsData.buyablePets | keyvalue">
          <ion-label>
            {{ newPet.key }}
          </ion-label>

          <ion-button size="small" slot="end" [disabled]="player.gold < newPet.value" (click)="buyPet(newPet.key)">
            Buy for {{ newPet.value | number }} gold
          </ion-button>
        </ion-item>
      </ion-item-group>
    </ion-list>
  </ng-container>
</ion-content>
